<template>
	<view>
		<view class="text-center text-red bg-white" v-if="status==2&&form.remek">拒绝原因:{{form.remek}}</view>

		<view class=" padding">
			<view class="text-white padding bg radius ">
				<u-form :model="form" label-position="top">
					<u-form-item label="个人形象照">
						<view v-if="!form.avatar" @click="geRen==0||geRen == 3 ?uploudAvatar():''"
							class="avatar flex flex-wrap justify-center">
							<u-icon name="camera" color="#8f8f94" size="60"></u-icon>
							<view class="avatar-txt">添加图片</view>
						</view>
						<image v-else :src="form.avatar" @click="geRen==0||geRen == 3 ?uploudAvatar():''"
							style="width: 200rpx;height: 200rpx;border-radius: 10rpx;" mode=""></image>
					</u-form-item>
					<u-form-item label="真实姓名 ">
						<u-input :disabled="geRen==1||geRen == 2" v-model="form.name" placeholder="请填写真实姓名" />
					</u-form-item>
					<u-form-item label="证件号码">
						<u-input :disabled="geRen==1||geRen == 2" v-model="form.idNumber" placeholder="请填写（必填）" />
					</u-form-item>
					<u-form-item label="出生日期">
						<u-input v-model="form.birth" :disabled="true" placeholder="请填写（必填）"
							:custom-style="{ pointerEvents: 'none' }"
							@click="geRen==0 || geRen == 3 ? showdata=true :''" />
					</u-form-item>
					<u-form-item label="性别">
						<u-input v-model="sex" :disabled="true" placeholder="请填写（必填）"
							:custom-style="{ pointerEvents: 'none' }"
							@click="geRen==0||geRen == 3 ? show = true : ''" />
					</u-form-item>
					<u-form-item label="护龄时间(年)" v-if="authentication==2">
						<u-input :disabled="geRen==1||geRen == 2" v-model="form.workAge" placeholder="请填写（必填）" />
					</u-form-item>
					<u-form-item label="联系方式">
						<u-input :disabled="geRen==1||geRen == 2" v-model="form.phone" type="number"
							placeholder="请填写（必填）" maxlength="11" />
					</u-form-item>
					<u-form-item label="绑定商户（选填）">

						<view style="display: flex;">
							<u-input v-model="shopId" style="width: 85%;" :disabled="true" placeholder="请填写（选填）"
								:custom-style="{ pointerEvents: 'none' }"
								@click="geRen==0||geRen == 3 ? showBusiness = true : ''" />
							<view style="width: 15%;display: flex;align-items: center;justify-content: center;"
								@click="geRen==0||geRen == 3 ? noShopId(): ''">
								<u-icon name="close" color="#8f8f94" size="30"></u-icon>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="服务地区" @click="showp=true">
						<u-input :disabled="geRen==1||geRen == 2" v-model="address" type="text" @click="showp=true"
							:custom-style="{ pointerEvents: 'none' }" disabled placeholder="请填写（必填）" />
					</u-form-item>
					<u-form-item label="服务项目">
						<!-- <u-input :disabled="geRen==1||geRen == 2" v-model="address" type="text" @click="showp=true" disabled placeholder="请填写（必填）" /> -->
						<u-checkbox-group :disabled="geRen==1||geRen == 2">
							<u-checkbox v-model="item.checked" v-for="(item, index) in employList" :key="index"
								:name="item.name">{{item.name}}</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item label="自我介绍">
						<!-- <u-input :disabled="geRen==1||geRen == 2" v-model="address" type="text" @click="showp=true" disabled placeholder="请填写（必填）" /> -->
						<u-input :disabled="geRen==1||geRen == 2" placeholder="请输入自我介绍(最多200字)"
							style="background-color: #F5F5F5;padding: 0 20rpx;" v-model="form.details" type="textarea"
							:border="false" :height="100" :auto-height="false" maxlength="200" />
					</u-form-item>
				</u-form>
			</view>

			<view class=" padding bg radius margin-top">
				<view class="text-lg">上传身份证正面</view>
				<view class="margin-top"
					style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
					<view style="text-align: center;margin: 80rpx auto 0;"
						@click="geRen==0||geRen == 3 ? addImages(1):''" v-if="!form.front">
						<image src="../static/photo.png" mode="widthFix" style="width: 73rpx;"></image>
						<view class="text-sm  margin-top-sm">添加身份证正面</view>
					</view>
					<image @click="geRen==0||geRen == 3 ? addImages(1):''" v-else :src="form.front"
						style="width: 100%;height: 320rpx;"></image>
				</view>
			</view>
			<view class="text-white padding bg radius margin-top">
				<view class="text-lg">上传身份证反面</view>
				<view class="margin-top"
					style="border: 2rpx dashed #484B74; width: 100%;height: 320rpx;position: relative;">
					<view style="text-align: center;margin: 80rpx auto 0;"
						@click="geRen==0||geRen == 3 ? addImages(2):''" v-if="!form.back">
						<image src="../static/photo.png" mode="widthFix" style="width: 73rpx;"></image>
						<view class="text-sm margin-top-sm">添加身份证反面</view>
					</view>
					<image @click="geRen==0||geRen == 3 ? addImages(2):''" v-else :src="form.back"
						style="width: 100%;height: 320rpx;"></image>
				</view>
			</view>
			<view class="imgs flex justify-center align-center flex-wrap"
				v-if="imageList.length>0 || geRen==0 || geRen == 3">
				<view class="imgs-title">
					其他资质
				</view>
				<view class="imgs-im flex justify-between flex-wrap">
					<view class="imgs-im-s" v-for="(item,index) in imageList" :key="index">
						<image :src="item" mode=""></image>
						<u-icon v-if="geRen==0||geRen == 3" @click="close(index)" name="close-circle"
							style="position: absolute;right: -15rpx;top: -15rpx;z-index: 9999 !important;" color="red"
							size="38"></u-icon>
					</view>
					<view v-if="imageList.length<9 && (geRen==0||geRen == 3)" class="imgs-im-s uploud"
						@click="geRen==0||geRen == 3 ? chooseImg():''" style="">
						<view class="" style="width: 100%;text-align: center;">
							<u-icon name="camera" color="#8f8f94" size="60"></u-icon>
						</view>
						<view class="" style="width: 100%;text-align: center;font-size: 20rpx;color: #8f8f94;">
							添加图片
						</view>
					</view>
					<view class="imgs-im-s" style="height: 0;"></view>
				</view>
			</view>

			<u-button @click="submit" v-if="geRen==0||geRen == 3" class="margin-top" :custom-style="customStyle"
				:hair-line="false">
				提交实名
			</u-button>
		</view>

		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		<u-select v-model="showBusiness" :list="businessList" @confirm="confirmBusiness"></u-select>
		<u-picker v-model="showdata" mode="time" :params="params" @confirm="confirmData"></u-picker>
		<u-picker v-model="showp" mode="region" @confirm="confirmp"></u-picker>
	</view>
</template>

<script>
	import configdata from '../../common/config.js';

	export default {
		data() {
			return {
				employList: [],
				imageList: [],
				showp: false,
				geRen: '',
				address: '',
				form: {
					details: '',
					avatar: '',
					name: '',
					idNumber: '',
					birth: '',
					sex: '',
					phone: '',
					front: '',
					workAge: '',
					back: '',
					province: '',
					city: '',
					district: '',
					shopId: '',
				},

				lableStyle: {
					color: '#000000',
					fontSize: '36upx'
				},
				customStyle: {
					backgroundColor: '#0175FE',
					color: '#000000',
					border: 0
				},

				renzheng: 0,
				show: false,
				showBusiness: false,
				list: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'
					}
				],
				businessList: [],
				sex: '',
				shopId: '',

				showdata: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				status: '',
				authentication: '', //1陪诊认证 2陪护认证

			}
		},




		onLoad(e) {
			if (e.authentication) {
				this.authentication = e.authentication
				if (e.authentication == 1) {
					uni.setNavigationBarTitle({
						title: '陪诊认证'
					})
				} else {
					uni.setNavigationBarTitle({
						title: '陪护认证'
					})
				}
			}

			//获取服务项目
			this.getEmployList()
			this.getBusinessList()

		},
		onShow() {
			this.geRen = uni.getStorageSync("geRen")
		},
		methods: {
			//获取服务项目列表
			getEmployList() {
				let data = {
					authentication: this.authentication,
					shopId: ''
				}
				if (uni.getStorageSync('shopId')) {
					data.shopId = uni.getStorageSync('shopId')
				} else {
					data.shopId = this.form.shopId
				}
				// this.$Request.getT('/app/hospitalEmploy/getEmployList', this.authentication != 2 ? data : '').then(res => {
				this.$Request.getT('/app/hospitalEmploy/getEmployList', data).then(res => {
					if (res.code == 0) {
						let arr = []
						res.data.map(item => {
							let obj = {
								name: item.serviceName,
								checked: false,
								disabled: false,
								serviceId: item.serviceId
							}
							arr.push(obj)
						})
						this.employList = arr
						this.getUserInfo()
					} else {
						this.employList = []
						this.getUserInfo()
					}
				})
			},


			getBusinessList() {
				this.$Request.getT('/app/shop/selectShopList').then(res => {
					if (res.code == 0) {
						this.businessList = res.data.map(it => {
							let a = {
								value: it.shopId,
								label: it.shopName
							}
							return a
						})
					}
				})
			},


			//上传头像
			uploudAvatar() {
				let that = this
				//选择图片
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: 'compressed',
					count: 1,
					success: res => {



						//循环上传图片
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								url: configdata.APIHOST1 + '/alioss/upload', //真实的接口地址
								// url: 'https://peizhensf.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									that.form.avatar = (JSON.parse(uploadFileRes.data).data)
									uni.hideLoading();
								}
							});
						}
					},
					fail: res => {
						console.log("res=============>", res);
					}
				});
			},
			//上传图片
			chooseImg() {
				let that = this
				//选择图片
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					sizeType: 'compressed',
					count: 1,
					success: res => {
						//循环上传图片
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								url: configdata.APIHOST1 + '/alioss/upload', //真实的接口地址
								// url: 'https://peizhensf.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									that.imageList.push(JSON.parse(uploadFileRes.data).data)
									uni.hideLoading();
								}
							});
						}
					}
				});
			},

			noShopId() {
				this.form.shopId = ''
				this.shopId = ''
				this.getEmployList()
			},

			//删除图片
			close(e) {
				this.imageList.splice(e, 1);
			},
			confirmp(e) {
				console.log(e);
				this.address = e.province.label + '' + e.city.label + '' + e.area.label
				this.form.province = e.province.label
				this.form.city = e.city.label
				this.form.district = e.area.label
			},
			confirmData(e) {
				console.log(e)
				this.form.birth = e.year + '-' + e.month + '-' + e.day
			},
			confirm(e) {
				console.log(e)
				this.sex = e[0].label
				this.form.sex = e[0].value
			},
			confirmBusiness(e) {
				this.shopId = e[0].label
				this.form.shopId = e[0].value
				this.getEmployList()
			},

			submit() {
				let serviceIds = []
				this.employList.map(item => {
					if (item.checked) {
						serviceIds.push(item.serviceId)
					}
				})
				if (!this.form.avatar) {
					uni.showToast({
						title: '请上传头像',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none',
						duration: 1000
					})
					return;
				}

				if (!this.form.idNumber) {
					uni.showToast({
						title: '请输入身份证号',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.birth) {
					uni.showToast({
						title: '请填写出生日期',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.sex) {
					uni.showToast({
						title: '请填写性别',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (this.authentication == 2) {
					if (!this.form.workAge) {
						uni.showToast({
							title: '请填写护龄时长',
							icon: 'none',
							duration: 1000
						})
						return
					}

				}

				if (!this.form.phone) {
					uni.showToast({
						title: '请填写联系方式',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.address) {
					uni.showToast({
						title: '请选择服务地区',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (serviceIds.length <= 0) {
					uni.showToast({
						title: '请选择服务项目',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.form.details) {
					uni.showToast({
						title: '请填写自我介绍',
						icon: 'none',
						duration: 1000
					})
					return
				}
				if (!this.form.front) {
					uni.showToast({
						title: '请上传身份证正面',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				if (!this.form.back) {
					uni.showToast({
						title: '请上传身份证反面',
						icon: 'none',
						duration: 1000
					})
					return;
				}
				this.form.serviceIds = serviceIds.join(',')
				this.form.authentication = this.authentication
				this.form.aptitude = this.imageList.join(',')

				this.$Request.postJson("/app/userCertification/insert", this.form).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '认证提交成功！',
							icon: 'none'
						})
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/my/index'
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				});
			},
			getUserInfo() {
				this.$Request.get("/app/userCertification/queryInsert").then(res => {
					console.log(res)
					if (res.code == 0) {
						if (res.data) {
							uni.setStorageSync("city", res.data.city)
							uni.setStorageSync("authentication", res.data.authentication)
							this.form = res.data
							if (this.form.shopId) {

								this.shopId = this.businessList.find(it => it.shopId = this.form.shopId).label
							}
							this.status = res.data.status
							if (res.data.province) {
								this.address = res.data.province + '' + res.data.city + '' + res.data.district
							}

							this.employList.map(item => {
								res.data.serviceIds.split(',').map(ite => {
									if (item.serviceId == ite) {
										item.checked = true
									}
								})
							})
							if (res.data.aptitude) {
								this.imageList = res.data.aptitude.split(',')
							} else {
								this.imageList = []
							}

							if (res.data.sex == 1) {
								this.sex = '男'
							}
							if (res.data.sex == 2) {
								this.sex = '女'
							}
						}
					}
				});
			},
			addImages(e) {
				let that = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < 1; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								url: this.config("APIHOST1") +
									'/alioss/upload', //真实的接口地址https://xxpwadmin.xianmxkj.com/sqx_fast/alioss/upload
								// url: 'https://peizhensf.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										that.form.front = JSON.parse(uploadFileRes.data).data
									} else if (e == 3) {
										that.forms.front = JSON.parse(uploadFileRes.data).data
									} else if (e == 2) {
										that.form.back = JSON.parse(uploadFileRes.data).data
									} else if (e == 4) {
										if (that.classify == 1) {
											that.form.shopImg = JSON.parse(uploadFileRes.data).data
										} else if (that.classify == 2) {
											that.forms.shopImg = JSON.parse(uploadFileRes.data)
												.data
										}

									}

									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			// 图片上传
			addImage() {
				let that = this
				uni.chooseImage({
					count: 6,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								url: configdata.APIHOST1 + '/alioss/upload', //真实的接口地址
								// url: 'https://peizhensf.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									uni.hideLoading();
									// if (that.addressImg.length < 6) {
									if (that.classify == 1) {
										that.addressImg.push(JSON.parse(uploadFileRes.data)
											.data)
									}
									// } else if (that.addressImgs.length < 6) {
									else if (that.classify == 2) {
										that.addressImgs.push(JSON.parse(uploadFileRes.data)
											.data)
									}
									// }
								}
							});
						}
					}
				})
			},
			config: function(name) {
				var info = null;
				if (name) {
					var name2 = name.split("."); //字符分割
					if (name2.length > 1) {
						info = configdata[name2[0]][name2[1]] || null;
					} else {
						info = configdata[name] || null;
					}
					if (info == null) {
						let web_config = cache.get("web_config");
						if (web_config) {
							if (name2.length > 1) {
								info = web_config[name2[0]][name2[1]] || null;
							} else {
								info = web_config[name] || null;
							}
						}
					}
				}
				return info;
			},
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #8f8f94;
		border-radius: 10rpx;
		color: #8f8f94;
		font-size: 20rpx;
		align-content: center;
		line-height: 0;

	}

	.avatar-txt {
		width: 100%;
		text-align: center;
		margin-top: 20rpx;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.imgs {
		width: 100%;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.imgs-title {
		font-size: 32rpx;
		width: 100%;
		padding-top: 20rpx;
		padding-left: 20rpx;
	}

	.imgs-im {
		width: calc(100% - 40rpx);
		height: auto;
		margin-top: 20rpx;
	}

	.imgs-im-s {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
		position: relative;
		border-radius: 10rpx;
	}

	.uploud {
		border: 2rpx dashed #8f8f94;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 60rpx;
		flex-wrap: wrap;
		align-content: center;
	}

	.imgs-im-s>image {
		width: 100%;
		height: 100%;
		z-index: 1;
		border-radius: 10rpx;
	}

	.u-size-default {
		background: #557EFD !important;
		color: #FFFFFF !important;
	}

	.u-input__input {
		color: balck !important;
	}

	.title_btn {
		height: 78upx;
		line-height: 78upx;
		/* background: #f7f7f7; */
	}

	.bgCol2 {
		color: #557EFD;
		background: #F2F5FF;
	}
</style>